<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/日历函数.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    .rlContainer {
      width: 400px;
      min-height: 300px;
      margin: 100px auto;
      border-left: 1px solid #333;
      border-top: 1px solid #333;
    }

    .rlDate {
      display: flex;
      line-height: 45px;
      text-align: center;
      border-bottom: 1px solid #333;
      border-right: 1px solid #333;
    }

    .rlDate .prev,
    .rlDate .next {
      width: -webkit-calc(100% / 7);
    }

    .rlDate .center {
      flex: 1;
    }

    .rlContainer .rlTitle,
    .rlContainer .rlDetail {
      display: flex;
      flex-wrap: wrap;
    }

    .rlContainer li {
      width: -webkit-calc(100% / 7);
      line-height: 45px;
      text-align: center;
      border: 1px solid #333;
      box-sizing: border-box;
    }

    .rlContainer li {
      border-left: 0;
      border-top: 0;
    }
  </style>
</head>

<body>
  <div class="rlContainer">
    <div class="rlDate">
      <div class="prev">&lt;</div>
      <div class="center"></div>
      <div class="next">&gt;</div>
    </div>
    <ul class="rlTitle">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
      <li>七</li>
    </ul>
    <ul class="rlDetail">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
    </ul>
  </div>
</body>
<script>
  var rlDetail = document.getElementsByClassName("rlDetail")[0];
  var prev = document.getElementsByClassName("prev")[0];
  var next = document.getElementsByClassName("next")[0];
  var center = document.getElementsByClassName("center")[0];

  // 全局变量  1. 页面加载时的当前时间  2. 记录 上下页点击切换后的时间
  var date = new Date();

  createRL();  //页面加载时动态生成

  // 点击上下月  
  //  => 切换月份(+1  -1)  =>在重新生成一遍
  // 问题: 大月向小月切换时  (31 -> 30, 30,31->29,28) 会有问题
  // 怎么解决?
  // 提前将日期设置为 每个月都有的日期  => 后面都会被再次改为0

  prev.onclick = function () {
    date.setDate(1);
    date.setMonth(date.getMonth() - 1);
    createRL();
  }
  next.onclick = function () {
    date.setDate(1);
    date.setMonth(date.getMonth() + 1);
    createRL();
  }



  function createRL() {

    // date自己没有 就找全局的(点击切换后的日期 年份和月份)
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    center.innerHTML = `${year}年${month}月`;

    var week = getFirstDayWeek(date);
    console.log(week);

    var lastMonthDays = getLastMonthDays(date);
    console.log(lastMonthDays);

    var thisMonthDays = getThisMonthDays(date);
    console.log(thisMonthDays);


    // 当前时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDay = now.getDate();

    var html = "";  //html拼接 lix42

    // 上个月
    for (var i = lastMonthDays - (week - 1) + 1; i <= lastMonthDays; i++) {
      html += `<li style="color:gray;">${i}</li>`;
    }

    // 当前月   
    // 如果切换后的年份 月份 和当前时间 年份 月份相同  => 今年今月 
    for (var i = 1; i <= thisMonthDays; i++) {
      if (year == nowYear && month == nowMonth && i == nowDay) {
        html += `<li style="background-color:blue;color:#fff;">${i}</li>`;
      } else {
        html += `<li>${i}</li>`;
      }
    }

    // 下个月
    for (var i = 1; i <= 42 - (week - 1) - thisMonthDays; i++) {
      html += `<li style="color:gray;">${i}</li>`;
    }

    rlDetail.innerHTML = html;

  }





</script>

</html>